<template>
  <div class="Links">
    <!--      快速链接-->
    <transition-group name="input" :class="['link-region']" :style="{border: editModel ? '.1rem solid #fff' : '', background: editModel ? '#00000088' : ''}">
      <div :class="['link-item', editModel ? 'editModel' : '']" v-for="(item) in fastLinkList" :key="item.name"
           @click="openLink(item)" :title="item.url">
<!--        <img class="icon" :src="item.url + '/favicon.ico'" alt="" @error="imgErrHandler">-->
        <el-image class="icon" :src="item.icon" lazy>
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
        <div class="text">
          {{ item.name }}
        </div>
      </div>
      <div class="item" style="display: flex; justify-content: center; align-items: center; width: 10rem;font-size: 2rem" key="add" v-if="editModel" @click="addLinkVisible = true">
        <div><i class="el-icon-plus"></i></div>
      </div>
    </transition-group>
    <el-dialog title="添加链接" append-to-body :visible.sync="addLinkVisible">
      <el-form :model="linkForm">
        <el-form-item label="名称">
          <el-input v-model="linkForm.name"></el-input>
        </el-form-item>
        <el-form-item label="链接">
          <el-input v-model="linkForm.url"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addLink">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import fastLinkList from '@/views/fastLinkList'

export default {
  name: 'Links',
  data () {
    return {
      addLinkVisible: false,
      fastLinkList,
      linkForm: {
        name: '',
        url: ''
      }
    }
  },
  props: ['editModel'],
  mounted () {
    // 获取本地保存的链接
    this.unionLinkList()
  },
  methods: {
    unionLinkList () {
      this.fastLinkList = []
      let linkList = JSON.parse(window.localStorage.getItem('linkList'))
      if (!linkList) {
        linkList = []
      }
      linkList.forEach(item => {
        const arr = item.url.split('/')
        item.icon = arr[0] + '//' + arr[2] + '/favicon.ico'
      })
      this.fastLinkList = fastLinkList.concat(linkList)
    },
    addLink () {
      let linkList = JSON.parse(window.localStorage.getItem('linkList'))
      if (!linkList) {
        linkList = []
      }
      let { name, url } = this.linkForm
      if (!url.startsWith('http')) {
        url = 'https://' + url
      }
      const index = linkList.findIndex(x => x.name === name)
      if (index !== -1) {
        linkList[index].url = url
      } else {
        linkList.push({
          name,
          url
        })
      }
      window.localStorage.setItem('linkList', JSON.stringify(linkList))
      this.$message.success('添加成功')
      this.unionLinkList()
      this.addLinkVisible = false
      // this.addLinkVisible = true
    },
    openLink (item) {
      if (this.editModel) {
        this.$confirm(`是否删除${item.name}？<br />${item.url}`, {
          confirmButtonText: '确定',
          dangerouslyUseHTMLString: true
        }).then(() => {
          const linkList = JSON.parse(window.localStorage.linkList)
          const index = linkList.findIndex(x => x.name === item.name)
          if (index !== -1) {
            linkList.splice(index, 1)
          }
          window.localStorage.linkList = JSON.stringify(linkList)
          this.unionLinkList()
          this.$message.success(`删除${item.name}成功`)
        })
        return
      }
      window.open(item.url, '_blank')
    },
    // 图片加载失败处理函数
    imgErrHandler (e) {
      console.log(e)
    }
  }
}
</script>

<style scoped lang="scss">
.Links {
  padding: 2rem;
  margin-bottom: 6rem;
  width: 100vw;
  //background: cornflowerblue;
  display: flex;
  justify-content: center;
  .link-region {
    display: flex;
    flex-wrap: wrap;
    transition: all ease .3s;
    border-radius: 1rem;
    padding: 2rem;

    .item, .link-item {
      cursor: pointer;
      color: #ffffff88;
      padding: 1rem;
      border: 1px solid #ffffff00;
      display: flex;
      margin: 1rem;
      flex-direction: column;

      .icon {
        height: 2.4rem;
        width: 2.4rem;
        color: #cccccc;
        padding: .8rem;
        background: #ffffff;
        border-radius: 1rem;
      }
      .text {
        width: 10rem;
        height: 2rem;
        display: flex;
        justify-content: center;
        margin-top: .5rem;
        font-size: 1.6rem;
      }
      &:hover {
        //color: #ffffff;
        background: #ffffff66;
        border-radius: 1rem;
      }
    }

    .link-item {
      color: #ffffff;
    }

    .link-item {
      display: flex;
      align-items: center;
    }

    .editModel {
      &:hover {
        border: #ffffff solid .1rem;
        color: #ffffff;
        background: #ff000088;
      }
    }
  }

  .input-enter-active, .input-leave-active {
    transition: all ease .3s;
  }

  .input-enter {
    opacity: 0;
    transition: all ease .3s;
    transform: translateX(-40px);
  }

  .input-leave-to {
    transition: all ease .3s;
    transform: translateX(-40px);
    opacity: 0;
  }
}
</style>
